<template>
  <div class="m50">
    <!-- 转化后 -->
    <el-table id="myTable" ref="myTable" border style="margin-top: 50px" :data="transData"
      @cell-click="handlerCellClick" @cell-mouse-leave="handlerCellMouseLeave" @cell-mouse-enter="handlerMousemove">
      <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
        <template slot-scope="{ row }">
          {{ row[index] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originData: [
        {
          type1: "休息",
          type2: "休息",
          type3: "休息",
          type4: "休息",
        },

        {
          type1: "休息",
          type2: "休息",
          type3: "休息",
          type4: "休息",
        },

        {
          type1: "休息",
          type2: "休息",
          type3: "休息",
          type4: "休息",
        },
      ],
      originTitle: ["财务", "采购员1", "采购员2", "采购员3"], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      transTitle: ["", "周一", "周二", "周三"], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
      transData: [],
      isClick: false, // 鼠标是否单击过
      currentCell: {}, // 当前单击的cell对象
      isLongClick: false, // 鼠标是否长按不松开
      selectCllList: [], // 存放滑动时选中的cell  // 滑动后在在进行单击的时候要清空
      select: [],  // 拖动的最终值
      currentSelect: [], // 单选的最终值
      temps: [],

    };
  },
  created() {
    // 数组按矩阵思路, 变成转置矩阵
    let matrixData = this.originData.map((row) => {
      let arr = [];
      for (let key in row) {
        arr.push(row[key]);
      }
      return arr;
    });
    console.log(matrixData);
    // 加入标题拼接最终的数据

    this.transData = matrixData[0].map((col, i) => {
      return [
        this.originTitle[i],
        ...matrixData.map((row) => {
          return row[i];
        }),
      ];
    });
    console.log(this.transData);
  },
  mounted() {

    let temp = document.getElementById("myTable");
    console.log(temp);
    temp.addEventListener("mousedown", this.handlerMousedown); // 鼠标按下事件
    temp.addEventListener("mouseup", this.handlerMouseup);// 鼠标按下抬起事件

  },
  watch: {
    select(n) {
      console.log("拖动的最终值", n);


    },
    currentSelect(n) {
      console.log("单选的最终值", n);

    }
  },
  methods: {
    // 单个 cell单击事件
    handlerCellClick(row, column, cell, event) {

      // 左侧财务 采购员 不能变色 并且cell 的文本内容不能为''
      if (!this.originTitle.includes(event.target.innerText) && event.target.innerText) {
        // 第二次点击要把第一次点击的 背景去掉
        if (this.selectCllList.length) {
          this.selectCllList.forEach(item => {
            item.cell.style = "background:#fff";
          })
        }
        if (this.currentCell.cell) {
          this.$nextTick(() => {
            this.currentCell.cell.style = "background:#fff";
          });
        }
        this.$nextTick(() => {
          this.currentCell.cell = cell;
          this.currentCell.column = column;
          this.currentCell.row = row;
          this.currentCell.event = event;
          cell.style = "background:red";
          this.selectCllList = []
          this.currentSelect = { column: column.label, row: row[0], itemText: cell.innerText }
        });
      }

    },
    //  鼠标点击按下事件
    handlerMousedown(event) {
      //  若果上一次是滑动则清空上一次存放的cell
      if (this.selectCllList.length) {
        this.selectCllList.forEach(item => {
          item.cell.style = "background:#fff";
          item.className
        })
        this.selectCllList = []
      }

      this.isLongClick = true;

      if (!this.originTitle.includes(event.target.innerText) && event.target.innerText) {
        if (this.currentCell.cell) {
          this.$nextTick(() => {
            this.currentCell.cell.style = "background:#fff";
          });
        }
        this.$nextTick(() => {
          this.currentCell.cell = event;
          event.style = "background:red";
        });
      }
    },
    //  鼠标点击抬起事件
    handlerMouseup(event) {

      this.isLongClick = false;

      // console.log("鼠标抬起", event);

    },
    //  element ui API  鼠标离开cell起事件
    handlerCellMouseLeave(row, column, cell, event) {

      if (!this.originTitle.includes(event.target.innerText) && event.target.innerText) {
        if (this.isLongClick) {
          if (!this.selectCllList.find(item => item.cell == cell)) {
            this.selectCllList.push({ row, column, cell, event })
          }
          event.target.style = "background:red";
        }
      }
    },
    //  element ui API  鼠标进入cell起事件
    handlerMousemove(row, column, cell, event) {
      if (!this.originTitle.includes(event.target.innerText) && event.target.innerText) {
        if (this.isLongClick) {
          if (!this.selectCllList.find(item => item.cell == cell)) {

            this.selectCllList.push({ row, column, cell, event })
          }

          event.target.style = "background:red";
        }
      }
      this.select = []
      this.selectCllList.forEach(item => {
        console.log(item);
        let temp = { column: item.column.label, row: item.row[0], itemText: item.cell.innerText }

        this.select.push(temp)
      })

    },
  },
};
</script>
<style scoped >
#myTable {
  /* 禁止文字被选中 */
  user-select: none;
}
</style>

